﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel = "Stylesheet" href = "css/CalculatorWithStyle.css" />
</head>
<body>
    <div class = "main">
        <div class = "headertable">
            <img src = "images/calculator.png" alt = "calculator" width = "12px" height= "16px;" class = "picture"/>
            <span id = "calculator">Calculator</span>
        </div>
        <div class = "headerButtons">
            <img src = "images/buttons.png" alt = "buttons"/>
        </div>
        
   <div class = "calculator">
        <div class = "navigation">
            <a href = "#">View</a>
            <a href = "#">Edit</a>
            <a href = "#">Help</a>
        </div>
        <div class = "result">
            <input type = "text" value = "8854455" />      
        </div>
        <table class = "numbers">
            <tr>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
                <td>0000</td>
            </tr>
            <tr>
                <td class = "coloredValues">63</td>
                <td></td>
                <td></td>
                <td></td>
                <td class = "coloredValues">47</td>
                <td></td>
                <td></td>
                <td class = "coloredValues" id = "right1">32</td>
            </tr>
            <tr>
                <td>0000</td>
                <td>0000</td>
                <td>1000</td>
                <td>0111</td>
                <td>0001</td>
                <td>1011</td>
                <td>1011</td>
                <td>0111</td>
            </tr>
            <tr>
                <td class = "coloredValues">31</td>
                <td></td>
                <td></td>
                <td></td>
                <td class = "coloredValues">15</td>
                <td></td>
                <td></td>
                <td class = "coloredValues" id = "right2">0</td>
            </tr>
        </table>
        <table class = "buttons">
            <tr>
                <td>
                    <form class = "numeralSystem">
                        <input type = "radio" name = "numeral"/> Hex <br/>
                        <input type = "radio" name = "numeral" checked = "checked"/> Dec<br/>
                        <input type = "radio" name = "numeral"/> Oct<br/>
                        <input type = "radio" name = "numeral"/> Bin    
                    </form>
                </td>
                <td>
                    <table id = "nestedtable1">
                        <tr>
                            <td><input type = "button" value = ""/ class = "colored"></td>
                            <td><input type = "button" value = "Mod" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "A" class = "colored"/></td>
                            <td><input type = "button" value = "MC" class = "colored"/></td>
                            <td><input type = "button" value = "MR" class = "colored"/></td>
                            <td><input type = "button" value = "MS" class = "colored"/></td>
                            <td><input type = "button" value = "M+" class = "colored"/></td>
                            <td><input type = "button" value = "M-" class = "colored"/></td>
                        </tr>
                        <tr>
                            <td><input type = "button" value = "(" class = "colorStyle1"/></td>
                            <td><input type = "button" value = ")" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "B" class = "colored"/></td>
                            <td><input type = "button" value = "←" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "CE" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "C" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "±" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "√" class = "colored"/></td>
                        </tr>
                        <tr>
                            <td><input type = "button" value = "RoL" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "RoR" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "C" class = "colored"/></td>
                            <td><input type = "button" value = "7" class = "values"/></td>
                            <td><input type = "button" value = "8" class = "values"/></td>
                            <td><input type = "button" value = "9" class = "values"/></td>
                            <td><input type = "button" value = "/" class = "colorStyle1"/></td>
                            <td><input type = "button" value = "%" class = "colored"/></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table class = "buttons1">
            <tr>
                <td>
                    <form class = "Word">
                        <input type = "radio" name = "word" checked = "checked"/> Qword <br/>
                        <input type = "radio" name = "word" /> Dword<br/>
                        <input type = "radio" name = "word"/> Word<br/>
                        <input type = "radio" name = "word"/> Byte
                    </form>
                </td>
            <td>
                <table id = "nestedtable2">
                    <tr class = "func1">
                        <td><input type = "button" value = "Or" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "Xor" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "D" class = "colored"/></td>
                        <td><input type = "button" value = "4" class = "values"/></td>
                        <td><input type = "button" value = "5" class = "values"/></td>
                        <td><input type = "button" value = "6" class = "values"/></td>
                        <td><input type = "button" value = "*" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "1/x" id = "xstyle" class = "colored"/></td>
                    </tr>
                    <tr>
                        <td><input type = "button" value = "Lsh" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "Rsh" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "E" class = "colored"/></td>
                        <td><input type = "button" value = "1" class = "values"/></td>
                        <td><input type = "button" value = "2" class = "values"/></td>
                        <td><input type = "button" value = "3" class = "values"/></td>
                        <td><input type = "button" value = "-" class = "colorStyle1"/></td>
                        <td rowspan = "2"><input type = "button" value = "=" id = "equal" class = "colorStyle1"/></td>
                    </tr>
                    <tr class = "func3">
                        <td><input type = "button" value = "Not" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "And" class = "colorStyle1"/></td>
                        <td><input type = "button" value = "F" class = "colored"/></td>
                        <td colspan = "2"><input type = "button" value = "0" id = "zero" class = "values"/></td>
                        <td><input type = "button" value = "." class = "colored"/></td>
                        <td><input type = "button" value = "+" class = "colorStyle1"/></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </div>  
   
</div>
</body>
</html>
